<template>
  <a-modal v-model:open="visible" title="新增账户" @ok="onOk" @cancel="onCancel" width="480px" :footer="null">
    <a-form :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" labelAlign="left">
      <a-form-item label="银行账号" required>
        <a-input v-model:value="form.bankAccount" placeholder="请输入银行卡号" />
      </a-form-item>
      <a-form-item label="银行类型" required>
        <a-select v-model:value="form.bankType" placeholder="请选择银行类型">
          <a-select-option value="J 交通银行">J 交通银行</a-select-option>
          <a-select-option value="ICBC 工商银行">ICBC 工商银行</a-select-option>
          <a-select-option value="ABC 农业银行">ABC 农业银行</a-select-option>
          <!-- 可补充更多银行类型 -->
        </a-select>
      </a-form-item>
      <a-form-item label="账户名称" required>
        <a-input v-model:value="form.accountName" placeholder="默认银行类型+卡号后4位，可手动修改" />
      </a-form-item>
      <a-form-item label="会计科目" required>
        <a-select v-model:value="form.accountSubject" placeholder="请选择会计科目">
          <a-select-option value="100201 银行存款-交通银行7057">100201 银行存款-交通银行7057</a-select-option>
          <!-- 可补充更多科目 -->
        </a-select>
      </a-form-item>
      <a-form-item label="初始化日期">
        <a-date-picker v-model:value="form.initDate" style="width: 100%;" />
      </a-form-item>
      <a-form-item label="初始化期初">
        <a-input v-model:value="form.initBalance" placeholder="本币" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 24 }" style="text-align:center; margin-top: 24px;">
        <a-button type="primary" style=" margin-right: 16px;" @click="onOk">保存</a-button>
        <a-button @click="onCancel">取消</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import dayjs from 'dayjs';
const visible = ref(false);
const form = reactive({
  bankAccount: '',
  bankType: '',
  accountName: '',
  accountSubject: '',
  initDate: '',
  initBalance: '本币',
});
function showModal(data) {
  visible.value = true;
  if (data) {
    Object.assign(form, data);
    if (data.initDate) {
      form.initDate = dayjs(data.initDate);
    } else {
      form.initDate = '';
    }
  } else {
    form.bankAccount = '';
    form.bankType = '';
    form.accountName = '';
    form.accountSubject = '';
    form.initDate = '';
    form.initBalance = '本币';
  }
}
function onOk() {
  visible.value = false;
  // 这里可以触发保存逻辑
}
function onCancel() {
  visible.value = false;
}
defineExpose({ showModal });
</script>

<style scoped>
:deep(.ant-modal-content) {
  padding-bottom: 0;
}
</style> 